<template>
  <div class="page-mobile-teacher-detail">
    <div class="teacher_ranking">
      <div class="teacher-bg">
        <div :class="['header-top',scroll > 0 ?'active':'']">
          <div class="header_left" @click="$router.back()">
            <van-icon name="arrow-left" style="margin-left:.2rem;" />
          </div>
          <div class="center_title">名师推荐</div>
          <div class="header_right">
            <!-- <img v-if="isShowSearch" src="/img/mobile/index_nav_search.png" alt="" @click="onClickRight"> -->
          </div>
        </div>
        <div class="fixed-box"></div>
        <div class="teacher_info">
          <div class="avatar">
            <img v-if="teacherInfo.avatar" :src="teacherInfo.avatar" alt />
            <img v-else src="/img/mobile/default-avatar.png" alt />
          </div>
          <div class="name">{{teacherInfo.acName}}</div>
          <div class="desc">
            <img src="/img/mobile/teacher_menus_title.png" alt />
            <div class="school">{{teacherInfo.designation}}</div>
          </div>
          <div class="describe">
            <div class="desc_text">
              <span style="color: #313233;font-weight: bold;">简介：</span>
              <span
                style="color: #adafb3;"
              >{{teacherInfo.ftIntroduce}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="course_list">
      <div class="course_title">
        <span style="margin-right:.1rem;">相关课程</span>
        <span>(</span>
        <span class="number">{{courseList.length}}</span>
        <span>)</span>
      </div>
      <div class="course_container">
        <course-card
          v-for="(item, index) in courseList"
          :detail="item"
          :is_member="is_member"
          :user_member="user_member"
          :memberDiscount="memberDiscount"
          :key="index"
          v-show="courseList.length > 0"
          :bottomInline="index != (courseList.length - 1)"
        ></course-card>
        <div class="footer" v-if="courseList.length != 0">
          <span class="tips">我是有底线的</span>
        </div>
        <van-empty :description="$t('locale.mobile.classify.t7')" v-show="courseList.length == 0" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getTeacherDetail } from "~/api/teacher";
import CourseCard from "~/components/mobile/CourseCard.vue";
import { getMemberInfo, getMember } from "~/api/member";
export default {
  props: ["setDisabled", "refreshFun", "setLoading"],
  components: {
    CourseCard,
  },
  data() {
    return {
      memberDiscount: {}, //会员折扣
      page: 1,
      pageSize: 10,
      total: 0,
      scroll_heigth: 0,
      title: "",
      courseList: [],
      scroll: 0,
      teacherInfo: {},
    };
  },
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
    }),
  },
  watch: {},
  methods: {
    ...mapActions(["initMember"]),
    ...mapMutations(["SET_IS_LOADING"]),
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      console.log("=============执行1");
      if (this.user_info && Object.keys(this.user_info).length > 0) {
        console.log("=============执行2");
        let result = await getMemberInfo(this.user_info.id);
        if (result && result.data && result.data.code == 200) {
          this.memberDiscount = result.data.data;
        } else {
          
        }
      } else {
        this.memberDiscount = {};
      }

      this.SET_IS_LOADING(false);
    },
    async getData() {
      this.SET_IS_LOADING(true);
      let teacherId = this.$route.query.id;
      let result = await getTeacherDetail(teacherId);
      console.log("老师详情", result.data.data);
      if (result && result.data.code == 200) {
        this.teacherInfo = result.data.data;
        this.courseList = result.data.data.courseList;
        this.SET_IS_LOADING(false);
      } else {
        this.SET_IS_LOADING(false);
        
      }
    },
    initPage() {
      return new Promise((res, rej) => {
        if (process.client) {
          try {
            this.getData();
            this.initMember();
            this.getMemberInfo();
            res("success");
          } catch (e) {
            console.log(e);
            rej(e);
          }
        }
      }).then();
    },
    throttle(fn, delay) {
      let lastTime = 0;
      return !(function () {
        let nowTime = Date.now();
        if (nowTime - lastTime > delay) {
          fn.call(this);
          lastTime = nowTime;
        }
      })();
    },
    pullUp() {
      // 滚动条离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 窗口可视区域高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      // 滚动区域高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      // 滚动条 + 可视区域高度 >= 滚动条高度 ==>  滚动条触底
      if (scrollTop + clientHeight >= scrollHeight - 120) {
        console.log("上拉加载");
        if (this.total <= this.courseList.length) {
          return;
        }
        if (this.is_loading) {
          return;
        }
        this.page++;
        // this.getData("pullup");
      }
    },
    eventListener() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.throttle(this.pullUp, 30);
    },
    initState() {
      this.page = 1;
      this.pageSize = 10;
      this.total = 0;
    },
  },
  activated() {
    if (process.client) {
      this.$nextTick(() => {
        setTimeout(() => {
          document.body.scrollTop = this.scroll_heigth;
          document.documentElement.scrollTop = this.scroll_heigth;
        }, 0);
      });
      window.addEventListener("scroll", this.eventListener);
      this.initPage();
    }
    this.setDisabled(false);
    this.refreshFun(() => {
      this.initPage()
        .then((res) => {
          if (res == "success") {
            this.setLoading(false);
          }
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
  },
  deactivated() {
    let scroll_heigth =
      document.documentElement.scrollTop || document.body.scrollTop;
    this.scroll_heigth = scroll_heigth;
    this.initState();
    this.setDisabled(true);
    window.removeEventListener("scroll", this.eventListener);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.eventListener);
  },
  created() {
    //开启下拉刷新
    this.setDisabled(false);
    //初始化页面数据
    this.initPage();
    //下拉回调
    this.refreshFun(() => {
      this.initPage()
        .then((res) => {
          if (res == "success") {
            this.setLoading(false);
          }
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
  },
  mounted() {
    if (process.client) {
      window.addEventListener("scroll", this.eventListener);
    }
  },
};
</script>

<style lang="scss" scoped>
.page-mobile-teacher-detail {
  width: 100vw;
  min-height: 100vh;
  background: #f7f7fa;
  .teacher_ranking {
    width: 100%;
    height: 7.584rem;
    background: #f7f7fa;
    .teacher-bg {
      width: 100%;
      height: 100%;
      background-image: url("/img/mobile/teacher-detail-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .header-top {
        width: 7.2rem;
        height: 0.9rem;
        z-index: 999999;
        position: fixed;
        top: 0;
        left: 0;
        line-height: 0.9rem;
        display: flex;
        align-items: center;
        box-shadow: none;
        .header_left {
          width: 15%;
          color: #ffffff;
          font-size: 0.35rem;
          display: flex;
          align-items: center;
        }
        .center_title {
          width: 70%;
          text-align: center;
          font-size: 0.3456rem;
          color: #ffffff;
          font-weight: bold;
        }
        .header_right {
          width: 15%;
          img {
            margin: 0 auto;
            display: block;
            width: 0.6111rem;
            height: 0.6111rem;
          }
        }
      }
      .header-top.active {
        background: #3a3b3c;
      }
      .fixed-box {
        width: 100%;
        height: 0.9rem;
      }
      .teacher_info {
        .avatar {
          width: 1.728rem;
          height: 1.728rem;
          overflow: hidden;
          margin: 0.5rem auto 0.3rem;
          border-radius: 50%;
          //   background: var(--theme-color);
          background: #ffffff;
          border: 0.04rem solid #ffffff;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
        .name {
          color: #ffffff;
          font-size: 0.3rem;
          text-align: center;
        }
        .desc {
          padding: 0.2rem 0;
          font-size: 0.26rem;
          color: #ffffff;
          justify-content: center;
          display: flex;
          align-items: center;
          img {
            width: 0.4rem;
            height: 0.4rem;
            display: block;
          }
          .school {
            margin-left: 0.1rem;
            max-width: 2rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .describe {
          width: 6rem;
          height: 2rem;
          background: #ffffff;
          margin: 0 auto;
          border-radius: 0.1rem;
          margin-top: 0.3rem;
          // box-shadow: 0px 3px 10px #807979;
          box-shadow: 0px 4px 8px #e6e3e3;
          box-sizing: border-box;
          padding: 0.2rem;
          font-family: PingFangSC-Regular;
          .desc_text {
            font-size: 0.3rem;
            line-height: 0.4rem;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
          }
        }
      }
    }
  }
  .course_list {
    .course_title {
      font-size: 0.3264rem;
      padding-left: 0.2rem;
      font-weight: bold;
      .number {
        color: var(--theme-color);
      }
    }
    .course_container {
          // width: 6.8rem;
          // margin: 0 auto;
      .footer {
        padding: 0.3rem;
        font-size: 0.26rem;
        color: #babec2;
        text-align: center;
        .tips {
          position: relative;
        }
        .tips::before {
          content: "";
          display: block;
          position: absolute;
          left: -1.7rem;
          top: 50%;
          transform: translateY(-1px);
          width: 1.5rem;
          height: 1px;
          background: #babec2;
        }
        .tips::after {
          content: "";
          display: block;
          position: absolute;
          right: -1.7rem;
          top: 50%;
          width: 1.5rem;
          transform: translateY(-1px);
          height: 1px;
          background: #babec2;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.page-mobile-teacher-detail {
}
</style>
